/**
 * ======================================
 * 角色管理
 * author: SKY-D
 * file: index.vue
 * date: 2022/6/16 22:25
 * ======================================
 */
<template>
  <page>
    <!--    查询条件-->
    <el-row slot="where">
      <el-col :span="24" class="k-text-left k-lh-2-2">
        <el-input v-model="WHERE.name" class="k-width-150-p k-mr-10" placeholder="角色名称" />
        <el-input v-model="WHERE.number" class="k-width-150-p k-mr-10" placeholder="角色编号" />
        <el-date-picker
          v-model="WHERE.start"
          type="date"
          placeholder="创建时间-开始"
          value-format="yyyy-MM-dd"
          class="k-mr-10"
        />
        <el-date-picker
          v-model="WHERE.end"
          type="date"
          placeholder="创建时间-结束"
          value-format="yyyy-MM-dd"
          class="k-mr-10"
        />

        <el-button type="primary" @click="_search">查询</el-button>
        <el-button type="info" @click="_reset">重置</el-button>
      </el-col>
    </el-row>
    <!--    功能-->
    <el-row slot="where">
      <el-col :span="24" class="k-text-left k-lh-2-2">
        <el-button v-permission="['SYSTEM:ROLE:ADD']" type="primary" @click="handleCreate">添加</el-button>
        <!--        <el-button v-permission="['SYSTEM:ROLE:EXPORT']"   type="warning" @click="handleExport">导出</el-button>-->
      </el-col>
    </el-row>
    <!--    表格-->
    <el-table
      slot="table"
      ref="tb"
      v-loading="LOADING"
      :data="CLASS_TABLE_DATA"
      :size="SIZE"
      border
      :height="LIST_HEIGHT"
      style="width: 100%"
      @selection-change="_handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <template v-for="(item) in setting">
        <el-table-column
          v-if="item.key === 'action'"
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
        >
          <template slot-scope="scope">
            <!--            <el-button @click="handleRange(scope.row)">范围</el-button>-->
            <el-button v-permission="['SYSTEM:ROLE:EDIT']" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-permission="['SYSTEM:ROLE:PERMISSION']" @click="handlePermission(scope.row)">权限</el-button>
            <el-button v-permission="['SYSTEM:ROLE:DEL']" @click="handleDel(scope.row)">删除</el-button>
          </template>

        </el-table-column>
        <el-table-column
          v-else
          :key="item.id"
          :label="item.name"
          :prop="item.key"
          :width="item.value"
        />
      </template>
    </el-table>
    <!--    分页-->
    <pagination slot="pagination" />
    <!--    弹窗-->
    <template slot="modal">
      <form-modal :visible.sync="FORM_VISIBLE" :type="FORM_TYPE" :data="FORM_DATA" @refresh="_getList" />
      <range-modal :visible.sync="rangeVisible" :data="rangeData" />
      <permission-modal :visible.sync="permissionVisible" :data="permissionData" />
    </template>
  </page>
</template>

<script>
import list from '@/list'
import RoleClass from '@/models/role-class'
import formModal from './components/form'
import rangeModal from './components/range'
import permissionModal from './components/permission'
import { delRole, getRoleList } from '@/api/system'
const roleClass = new RoleClass()
export default {
  name: 'DeepInterpretationOrder',
  components: { formModal, rangeModal, permissionModal },
  mixins: [list],
  data() {
    return {
      caseRequestURLType: '',
      setting: roleClass.list(),
      WHERE: {
        name: '', // 角色民初
        number: '', // 角色编号
        start: '', // 开始
        end: '' // 借宿
      },
      rangeVisible: false,
      rangeData: {},
      permissionVisible: false,
      permissionData: {}
    }
  },
  created() {
    this.LIST_API = getRoleList
  },
  mounted() {
  },
  methods: {
    _setClass() {
      console.log('[mixin][list]设置类')
      const list = []
      this.TABLE_DATA.forEach(v => {
        const item = new RoleClass(v)
        list.push(item)
      })
      this.CLASS_TABLE_DATA = list
    },
    handleRange(item) {
      console.log('编辑', item)
      this.rangeData = item
      this.rangeVisible = true
    },
    handleCreate() {
      console.log('添加')
      this.FORM_TYPE = 'create'
      this.FORM_VISIBLE = true
    },
    handleEdit(item) {
      console.log('编辑', item)
      this.FORM_TYPE = 'edit'
      this.FORM_DATA = item
      this.FORM_VISIBLE = true
    },
    handlePermission(item) {
      console.log('编辑', item)
      this.permissionData = item
      this.permissionVisible = true
    },
    handleExport() {
      this._showSuccess('导出成功')
    },
    handleDel(item) {
      console.log('删除', item)
      this.$confirm('确认删除？')
        .then(_ => {
          delRole(item.id).then(res => {
            this._showSuccess('删除成功')
            this._getList()
          })
        })
        .catch(_ => {})
    }
  }
}
</script>
